<template>
	<view class="  ">
		
		<picker mode="multiSelector" :value="dateTime" @change="changeDateTime" @columnchange="changeDateTimeColumn"
			:range="dateTimeArray">
			<view class='lableBox'>
				<view class="choose-value">{{timeStr}}</view>
			</view>
		</picker>
	</view>
</template>

<script>
	const {
		dateTimePicker,
		getMonthDay
	} = require('@/components/picker-times/time.js');
	export default {
		props:{
			timeStrs: {
				type: [String],
				default: "请选择时间"
			},
		},
		data() {
			return {
				dateTime: null,
				dateTimeArray: null,
				startYear: 1900,
				timeStr:this.timeStrs
			}
		},
		
		created() {
			this.initTime()
		},
		mounted(){
			
			if(!this.timeStrs){
				this.timeStr='请选择时间'
			}
		},
		watch: {
		  timeStrs: {
			handler(newVal,oldVal) {
			  this.timeStr = newVal
			},
			deep:true,
			immediate: true,
		  }
		},

		methods: {

			initTime() {
				let date = new Date();
				let endYear = date.getFullYear();
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker(this.startYear, endYear);
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();

				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				// this.timeStr = this.createTimeStr(this.dateTimeArray, this.dateTime);
			},

			changeDateTime(e) {
				this.dateTime = e.detail.value;
				var aa = this.createTimeStr(this.dateTimeArray, this.dateTime);
				this.timeStr = aa.replace(/\.|\-/g, '/');
				// console.log('timeStr',this.timeStr);
				this.$emit('pickTime',this.timeStr)
			},

			/*年,月切换时重新更新计算*/
			changeDateTimeColumn(e) {
				//let {id} = e.target;
				let {
					column,
					value
				} = e.detail;
				if (column == 0 || column == 1) {
					//直接修改数组下标视图不更新,用深拷贝之后替换数组
					let dateTime = JSON.parse(JSON.stringify(this.dateTime));
					let dateTimeArray = JSON.parse(JSON.stringify(this.dateTimeArray));
					dateTime[column] = value;
					dateTimeArray[2] = getMonthDay(dateTimeArray[0][dateTime[0]], dateTimeArray[1][dateTime[1]]);
					this.dateTime = dateTime;
					this.dateTimeArray = dateTimeArray;
				}
			},

			createTimeStr(dateTimeArray, dateTime) {
				let timeStr = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] + '-' + dateTimeArray[2][
					dateTime[2]
				] + ' ' + dateTimeArray[3][dateTime[3]] + ":" + dateTimeArray[4][dateTime[4]];
				// + ":" + dateTimeArray[5][dateTime[5]]
				// console.log(timeStr, '93-timeStr')
				return timeStr
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lableBox{
		color: #949694;
		font-size: 24rpx;
		
		.choose-value{
			width: 320rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: right;
		}
	}
</style>

